import React, { Component } from "react"
import "./index.css"
import RightContainer from "../../../components/RightContainer"
import { Input , Select,Tabs,Table  } from 'antd';
const { Search } = Input;
const { TabPane } = Tabs;
class list extends Component {
    state = {
        columns: [
            {
                title: 'ID',
                dataIndex: 'age',
                key: 'age',
            },
            {
                title: '商家信息',
                dataIndex: 'name',
                key: 'name',
                render: text => <a>{text}</a>,
            },

            {
                title: '买家信息',
                dataIndex: 'address',
                key: 'address',
            },
            {
                title: '送货方式',
                dataIndex: 'addy',
                key: 'addy',
            },
            {
                title: '支付金额',
                dataIndex: 'addif',
                key: 'addif',
            },
            {
                title: '状态',
                key: 'tags',
                dataIndex: 'tags',

            },
        ],
        data: [
            {
                key: '1',
                name: 'John',
                age: 32,
                address: 'New',
                tags: 'developer',
                addy: "sfsdff",
                addif: "收款机房不好",
            },
            {
                key: '2',
                name: 'John',
                age: 32,
                address: 'New',
                tags: 'developer',
                addy: "sfsdff",
                addif: "收款机房不好",
            },
            {
                key: '3',
                name: 'John',
                age: 32,
                address: 'New',
                tags: 'developer',
                addy: "sfsdff",
                addif: "收款机房不好",
            }
        ]

    }
    render() {
        function onChange(value) {
            console.log(`selected ${value}`);
        }

        function onBlur() {
            console.log('blur');
        }

        function onFocus() {
            console.log('focus');
        }

        function onSearch(val) {
            console.log('search:', val);
        }

        function callback(key) {
            console.log(key);
        }


        const { data, columns } = this.state
        return <RightContainer>
            <div className="qw">
                <Select
                    showSearch
                    style={{ width: 200 }}
                    placeholder="订单号"
                    optionFilterProp="children"
                    onChange={onChange}
                    onFocus={onFocus}
                    onBlur={onBlur}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    <Option value="jack">订单号</Option>
                    <Option value="lucy">买家姓名</Option>
                    <Option value="tom">买家电话</Option>
                </Select>
                <Search className="p1" placeholder="请输入内容" onSearch={this.onSearch} style={{ width: 200 }} />
            </div>
            <div className="qe">
                <Tabs defaultActiveKey="1" onChange={callback}>
                    <TabPane tab="全部" key="1">
                        <div>
                            <Table columns={columns} dataSource={data} />
                        </div>
                    </TabPane>
                    <TabPane tab="代付款" key="2">
                        Content of Tab Pane 2
                    </TabPane>
                    <TabPane tab="代发货" key="3">
                        Content of Tab Pane 3
                    </TabPane>
                    <TabPane tab="已发货" key="4">
                        Content of Tab Pane 3
                    </TabPane>
                    <TabPane tab="已完成" key="5">
                        Content of Tab Pane 3
                    </TabPane>
                    <TabPane tab="退款中" key="6">
                        Content of Tab Pane 3
                    </TabPane>
                    <TabPane tab="关闭" key="7">
                        Content of Tab Pane 3
                    </TabPane>
                </Tabs>
            </div>
        </RightContainer>
    }
}
export default list